<template>
  <div class="flex-1 overflow-scroll w-full px-16px pb-16px box-border" style="background: #e4e4e4">
    <el-table
      :data="data"
      border
      :show-header="false"
      style="width: 100%; height: 100%"
      height="100%"
      v-el-table-infinite-scroll="debounce(scrollToLower, 300)"
    >
      <el-table-column align="left" prop="operate" label="操作" :width="240">
        <template slot-scope="scope">
          <div class="card-list">
            <div class="card-top">
              <p>
                <span>知识点</span>
                <span>{{ column[0].formatter(scope.row) }}</span>
              </p>
              <p v-show="column[5].formatter(scope.row)">
                <span>最后一次练习时间:</span>
                <span>{{ column[5].formatter(scope.row) }}</span>
              </p>
            </div>
            <div class="card-end">
              <div class="end-left">
                <div class="child">
                  <p
                    ><span>{{ column[4].formatter(scope.row) }}</span
                    ><span>分钟</span></p
                  >
                  <p>主观题用时</p>
                </div>
                <div class="line"></div>
                <div class="child">
                  <p
                    ><span>{{ column[2].formatter(scope.row) }}</span
                    ><span>%</span></p
                  >
                  <p>正确率</p>
                </div>
                <div class="line"></div>
                <div class="child">
                  <p
                    ><span>{{ column[1].formatter(scope.row) }}</span
                    ><span></span
                  ></p>
                  <p>做题数</p>
                </div>
                <div class="line"></div>
                <div class="child">
                  <p
                    ><span>{{ column[3].formatter(scope.row) }}</span
                    ><span>分钟</span></p
                  >
                  <p>客观题用时</p>
                </div>
              </div>
              <div class="end-right">
                <span v-show="scope.row.kpointPracticeBaseVO" @click="goLastPractice(scope.row)"
                  >继续上次题目{{ scope.row | diffcultyLevelName(questionDifficultyType) }}</span
                >
                <span @click="go(scope.row)">去练习</span>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { debounce } from '@/utils'
import elTableInfiniteScroll from 'el-table-infinite-scroll'

export default {
  directives: {
    'el-table-infinite-scroll': elTableInfiniteScroll
  },
  filters: {
    diffcultyLevelName(item, types) {
      const { kpointPracticeBaseVO = '' } = item

      if (!kpointPracticeBaseVO) return ''

      const { difficultyLevel = '' } = kpointPracticeBaseVO

      if (!difficultyLevel) return ''

      const { label = '' } = types.find((type) => type.value == difficultyLevel)
      return `（${label}）`
    }
  },
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      loading2: false,
      debounce,
      questionDifficultyType: [],
      column: [
        {
          prop: 'kpointName',
          label: '知识点',
          formatter: (row) => {
            return row.kpointName ? row.kpointName : '无知识点'
          }
        },
        {
          prop: 'questionNum',
          label: '做题数',
          formatter: (row) => {
            return row.questionNum ? row.questionNum : 0
          }
        },
        {
          prop: 'questionNumSuccess',
          label: '正确率',
          formatter: (row) => {
            const { questionNumSuccess = 0, questionNum = 0 } = row
            if (!questionNum) return '0'
            if (!questionNumSuccess) return '0'
            return `${((parseInt(questionNumSuccess) / parseInt(questionNum)) * 100).toFixed(2)}`
          }
        },
        {
          prop: 'objectiveTime',
          label: '客观题用时（分钟）',
          formatter: (row) => {
            const { questionNum = 0 } = row
            if (!questionNum) return '0'
            return (parseInt(row['objectiveTime']) / 1000 / 60).toFixed(2)
          }
        },
        {
          prop: 'subjectiveTime',
          label: '主观题用时（分钟）',
          formatter: (row) => {
            const { questionNum = 0 } = row
            if (!questionNum) return '0'
            return (parseInt(row['subjectiveTime']) / 1000 / 60).toFixed(2)
          }
        },
        {
          prop: 'lastRecordTime',
          label: '最后一次练习时间',
          formatter: (row) => {
            const { questionNum = 0 } = row
            if (!questionNum) return ''
            return this.$utils.formatTimeStamp(row['lastRecordTime'])
          }
        }
      ]
    }
  },
  created() {
    this.init()
  },
  mounted() {},
  methods: {
    ...mapActions(['getDictByType']),
    async init() {
      this.questionDifficultyType = await this.getDictByType('question_difficulty_type')
      console.log(this.questionDifficultyType, this.data)
    },
    scrollToLower() {
      this.$emit('scrollToLower')
    },
    go(data) {
      this.$emit('go', data)
    },
    goLastPractice(data) {
      this.$emit('goLastPractice', data)
    }
  }
}
</script>

<style lang="scss" scoped>
.card-list {
  height: 161px;
  background: #fff;
  border-radius: 10px;
  padding: 14px 16px 20px 8px;
  box-sizing: border-box;
  .card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 31px;
    p {
      display: flex;
      align-items: center;
    }
    p:nth-of-type(1) {
      span {
        font-size: 26px;
      }
      span:last-child {
        font-weight: 500;
        margin-left: 10px;
      }
      span:first-child {
        color: #a2a2a2;
      }
    }
    p:last-child {
      span {
        font-size: 20px;
      }
      span:last-child {
        margin-left: 10px;
        font-weight: 500;
      }
      span:first-child {
        color: #a2a2a2;
      }
    }
  }
  .card-end {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .end-left {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .line {
        width: 0px;
        height: 37px;
        border: 1px solid #d9d9d9;
      }
      .child {
        width: 200px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        p {
          display: flex;
          justify-content: center;
          white-space: nowrap;
          flex-wrap: nowrap;
          span {
            font-size: 20px;

            height: 20px;
            line-height: 20px;
            display: flex;
            align-items: flex-end;
            justify-content: center;
          }
          span:first-child {
            height: 44px;
            line-height: 44px;
            font-size: 44px;
            font-weight: 500;
            display: flex;
            overflow: hidden;
          }
        }
        p:first-child {
          margin-bottom: 2px;
          align-items: flex-end;
        }
        p:last-child {
          font-size: 24px;
          color: #a2a2a2;
        }
      }
    }
    .end-right {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      flex-wrap: nowrap;
      span {
        font-size: 26px;
        background: linear-gradient(92deg, #51c3ff 0%, #00a5fc 100%);
        border-radius: 30px 30px 30px 30px;
        display: flex;
        align-items: center;
        padding: 16px 12px;
        color: #fff;
        white-space: nowrap;
      }
      span:first-child {
        margin-right: 8px;
      }
    }
  }
}
/deep/ .el-table {
  background: #e4e4e4 !important;
  border: none !important;
}
/deep/ .el-table tr {
  background: #e4e4e4 !important;
}
/deep/ .el-table td.el-table__cell {
  border: none !important;
}
/deep/ .cell {
  padding: 0px !important;
}
/deep/ .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
  background:none !important;
}
</style>
